<template>
  <div class="user-edit">
    <!-- Drawer抽屉 -->
    <Drawer
      :title="title"
      v-model="visible"
      width="720"
      draggable
      :mask-closable="type == '0'"
    >
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <div class="drawer-header">
          <div style="margin-right: 16px">基本信息</div>
        </div>
        <!-- <Form label-colon>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="用户ID">
                {{ form.id }}
                <Tooltip trigger="hover" placement="right" content="账户已禁用">
                  <Icon
                    v-show="form.status == -1"
                    type="md-lock"
                    size="18"
                    style="margin-left: 10px; cursor: pointer"
                  />
                </Tooltip>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="登录账号">
                {{ form.username }}
                <Tooltip
                  trigger="hover"
                  placement="right"
                  :content="`密码强度：${form.passStrength}`"
                >
                  <Icon
                    v-show="form.passStrength"
                    type="md-key"
                    :color="passColor"
                    size="18"
                    style="margin-left: 10px; cursor: pointer"
                  />
                </Tooltip>
              </FormItem>
            </Col>
          </Row>
        </Form> -->
        <Form
          ref="form"
          :model="form"
          :rules="ruleValidate"
          label-position="top"
        >
          
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="企业名称：" prop="companyName">
                <Input v-model="form.companyName" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="企业地址：" prop="companyAddress">
                <Input v-model="form.companyAddress" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="行业类型：" prop="companyIndustryId">
                <Select v-model="form.companyIndustryId" transfer placeholder="请选择">
                  <Option v-for="item in companyTypeList" :key="item.id" :value="item.id">{{item.value}}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="人员规模：" prop="companyScaleId">
                <Select v-model="form.companyScaleId" transfer placeholder="请选择">
                  <Option v-for="item in compancaleList" :key="item.id" :value="item.id">{{item.value}}</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="头像" class="form-noheight">
                <upload-pic-input v-model="form.companyIcon"></upload-pic-input>
              </FormItem>
            </Col>
            <Col span="12">
              <!-- <FormItem label="角色会员选择：" prop="roleIds"> -->
              <FormItem label="角色会员选择：" prop="parkRoleId">
                <Select v-model="form.parkRoleId" transfer placeholder="请选择">
                  <Option
                    v-for="item in idenTypeList"
                    :value="item.id"
                    :key="item.id"
                    :label="item.title"
                  >{{ item.title }}
                  </Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <!-- <Divider /> -->
          <p class="drawer-title">管理员信息</p>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="姓名：" prop="nickname">
                <Input v-model="form.nickname" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="手机号：" prop="mobile">
                <Input v-model="form.mobile" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="登录密码：" prop="password">
              <!-- <FormItem label="登录密码："> -->
                <Input v-model="form.password" />
              </FormItem>
            </Col>
          </Row>
          <p class="drawer-title">企业性质选择</p>
          <Row :gutter="32">
            <Col span="12">
            <FormItem label="企业性质：" prop="companyTypeId">
              <RadioGroup v-model="form.companyTypeId">
                <Radio :label="item.id" v-for="item in companyNatureList" :valu="item.id"  :key="item.id">
                    <span>{{item.title}}</span>
                </Radio>
              </RadioGroup>
            </FormItem>
            </Col>
          </Row>
          <Row class="row-view" :gutter="32" v-if="showIntegralScale">
            <Col span="12">
              <FormItem label="消费积分分摊比例：" prop="companyIntegralScale">
                <div class="integra-box">
                  <div>
                    <span>平台</span>
                    <Input v-model="form.companyIntegralScale" />
                    <i>%</i>
                  </div>
                  <!-- <div>
                    <span>商铺</span>
                    <input type="text">
                    <i>%</i>
                  </div> -->
                </div>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="该店面所在园区位置：" >
                <RadioGroup v-model="yuanqu">
                  <Radio label="园区里" >
                      <span>园区里</span>
                  </Radio>
                  <Radio label="园区外" >
                      <span>园区外</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
          </Col>
          </Row>
          <!-- <p class="drawer-title p-title">组织证件：</p> -->
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="组织证件：" class="form-noheight">
                <upload-pic-input v-model="form.companyLicense"></upload-pic-input>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12"> 
              <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
              <Button @click="visible = false">取消</Button>
            </Col>
          </Row>
        </Form>
      </div>
      <!-- <div class="drawer-footer br" v-show="type != '0'">
        <Button type="primary" :loading="submitLoading" @click="submit"
          >提交</Button
        >
        <Button @click="visible = false">取消</Button>
      </div> -->
    </Drawer>
  </div>
</template>

<script>
import { companyAdd,    getFindAll, getCompanyScale, getCompanyType, getScParkRoleAll, editUser } from "@/api/index";
import {
  validateUsername,
  validateMobile,
  validatePassword,
} from "@/libs/validate";
import departmentTreeChoose from "@/views/my-components/xboot/department-tree-choose";
import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
import SetPassword from "@/views/my-components/xboot/set-password";
import dict from "@/views/my-components/xboot/dict";
export default {
  name: "user",
  components: {
    departmentTreeChoose,
    uploadPicInput,
    SetPassword,
    dict,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      companyTypeList: [], //企业类型列表
      compancaleList: [], //企业规模列表
      companyNatureList: [], //企业性质列表
      idenTypeList: [], //角色分配
      // companyNature: {},
      showIntegralScale: false,
      yuanqu: '', //园区里外
      roleList: [],
      visible: this.value,
      title: "",
      passColor: "",
      submitLoading: false,
      maxHeight: 510,
      user: {
          nickname: '',
          mobile: '',
          password: ''
      },
      form: {
        // address: [],
        
      },
      /*{
        companyName: '',
        companyAddress: '',
        companyIndustryId: 公司行业id,
        companyScaleId: 公司规模,
        companyIcon: 公司logo,
        companyTypeId: 公司类型id,
        companyLicense: 公司营业执照,
        companyIntegralScale: 企业消费积分分摊比列,
        parkRoleId: 园区角色id
        user.nickname: '',
        user.mobile: '',
        user.password: '',
      }*/
      ruleValidate: {
        companyName: [
          { required: true, message: "请输入企业名称", trigger: "blur" }
        ],
        companyAddress: [
          { required: true, message: "请输入企业地址", trigger: "blur" }
        ],
        companyTypeId: [
          { required: true, message: "请选择企业性质", trigger: "change" }
        ],
        companyIndustryId: [
          { required: true, message: "请选择行业类型", trigger: "change" }
        ],
        companyIntegralScale: [
          { required: true, message: "请输入分摊比例", trigger: "change" }
        ],
        companyScaleId: [
          { required: true, message: "请选择人员规模", trigger: "change" }
        ],
        parkRoleId: [
          { required: true, message: "请选择角色会员", trigger: "change" }
        ],
        nickname: [
          { required: true, message: "请输入姓名", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "change" },
          { validator: validateMobile, trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          // { validator: validatePassword, trigger: "blur" },
        ],
      },
      // formValidate: {
      //   // 表单验证规则
      //   username: [
      //     { required: true, message: "请输入登录账号", trigger: "change" },
      //     { validator: validateUsername, trigger: "change" },
      //   ],
        
      //   nickname1: [
      //     { required: true, message: "请输入姓名111", trigger: "blur" },
      //   ],
      //   mobile: [
      //     { required: true, message: "请输入手机号", trigger: "blur" },
      //     { validator: validateMobile, trigger: "change" },
      //   ],
      //   password: [
      //     { required: true, message: "请输入密码", trigger: "blur" },
      //     // { validator: validatePassword, trigger: "blur" },
      //   ],
      //   email: [
      //     { required: true, message: "请输入邮箱地址" },
      //     { type: "email", message: "邮箱格式不正确" },
      //   ],
      // },
    };
  },
  methods: {
    init() {
      this.getCompanyScaleData()
      this.getFindAllData()
      this.getCompanyTypeData()
      this.getScParkRoleAllData()
    },
    
    // getRoleList() {
    //   getAllRoleList().then((res) => {
    //     if (res.success) {
    //       this.roleList = res.result;
    //     }
    //   });
    // },
    
    getCompanyScaleData() {
      getCompanyScale().then(res => {
        if (res.success) {
          this.compancaleList = res.result;
        }
      })
    },
    getFindAllData() {
      getFindAll().then(res => {
        if (res.success) {
          this.companyNatureList = res.result;
        }
      })
    },
    getCompanyTypeData() {
      getCompanyType().then(res => {
        if (res.success) {
          this.companyTypeList = res.result;
        }
      })
    },
    getScParkRoleAllData() {
      getScParkRoleAll().then(res => {
        if (res.success) {
          this.idenTypeList = res.result;
        }
      })
    },
    handleSelectDepTree(v) {
      // this.form.departmentId = v;
    },
    changePass(v, grade, strength) {
      // this.form.passStrength = strength;
    },
    submit() {
      // console.log(this.form)
      // return
      this.$refs.form.validate((valid) => {
        if(valid) {
          // let user = {
          //   nickname: this.form.nickname,
          //   mobile: this.form.mobile,
          //   password: this.form.password
          // }
          let obj = {
            ...this.form,
            "user.nickname": this.form.nickname,
            "user.mobile": this.form.mobile,
            "user.password": this.form.password
            // user: JSON.stringify(user)
          }
          console.log(obj)
          companyAdd(obj).then(res => {
            console.log(res)
            if (res.success) {
              console.log('注册成功')
              this.$Message.success("操作成功")
              this.visible = false
            }
          })
        }

        // if (valid) {
        //   if (typeof this.form.birth == "object") {
        //     this.form.birth = this.format(this.form.birth, "yyyy-MM-dd");
        //   }
        //   if (this.type == "1") {
        //     // 编辑
        //     this.submitLoading = true;
        //     editUser(this.form).then((res) => {
        //       this.submitLoading = false;
        //       if (res.success) {
        //         this.$Message.success("操作成功");
        //         this.$emit("on-submit", true);
        //         this.visible = false;
        //       }
        //     });
        //   } else {
        //     // 添加
        //     this.submitLoading = true;
        //     addUser(this.form).then((res) => {
        //       this.submitLoading = false;
        //       if (res.success) {
        //         this.$Message.success("操作成功");
        //         this.$emit("on-submit", true);
        //         this.visible = false;
        //       }
        //     });
        //   }
        // }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == "1") {
        this.title = "编辑用户";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else if (this.type == "2") {
        this.title = "添加用户";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else {
        this.title = "用户详情";
        this.maxHeight = "100%";
      }
      // 清空数据
      this.$refs.form.resetFields();
      if (this.type == "0" || this.type == "1") {
        // 回显数据
        let data = this.data;
        // 地址
        if (data.address) {
          data.address = data.address.split(",");
        } else {
          data.address = [];
        }
        // 部门
        // this.$refs.depTree.setData(data.departmentId, data.departmentTitle);
        // 角色
        let selectRolesId = [];
        data.roles.forEach(function (e) {
          selectRolesId.push(e.id);
        });
        data.roleIds = selectRolesId;
        delete data.roles;
        delete data.permissions;
        // 密码强度
        if (data.passStrength == "弱") {
          this.passColor = "#ed3f14";
        } else if (data.passStrength == "中") {
          this.passColor = "#faad14";
        } else if (data.passStrength == "强") {
          this.passColor = "#52c41a";
        }
        // 回显
        this.form = data;
      } else {
        // 添加
        // this.$refs.depTree.setData("", "");
        this.form = {
          // type: 0,
          // sex: "",
          // address: [],

        };
      }
      this.visible = value;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
    form: {
      handler: function(n, o) {
        let flag = this.companyNatureList.some(item => {
          if(item.id == this.form.companyTypeId && (item.type == '2' || item.type == '3')){
            return true
          }else{
            return false
          }
        })
        if(flag) {
          this.showIntegralScale = true
        }else{
          this.showIntegralScale = false
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.init()
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
</style>

